* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f7f7f7;
}

a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
  /* 解决点击高亮*/
  -webkit-tap-highlight-color: transparent;
}

input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

img {
  display: block;
  width: 100%;
}

ul {
  margin: 0;
  list-style: none;
}

.clearfix:after {
  display: block;
  content: "";
  height: 0;
  clear: both;
}

.list {
  .hd {
    background-color: #fff;
    // position: fixed;
    // top: 0;
    // width: 100%;
    border-bottom: 1px solid #ddd;
    display: flex;

    a {
      color: #666;
      text-align: center;
      text-decoration: none;
    }

    .filter {
      width: 100%;
      display: flex;

      div {
        float: left;
        flex: 4;
        border-right: 1px solid #ddd;

        a {
          height: .38rem;
          display: flex;
          justify-content: center;
          // align-items: center;
          line-height: .38rem;
          overflow: hidden;
          font-size: .14rem;
          position: relative;

          span:nth-child(2) {
            position: absolute;
            right: .2rem;
            font-size: .14rem;
            line-height: .38rem;
          }
        }



        &:nth-child(3) a {
          border-right: 1px solid #ddd;
        }
      }
    }

    .search {
      width: .46rem;
      line-height: .38rem;
    }

    .popsort {
      background-color: #fff;
      position: absolute;
      width: 100%;
      top: .74rem;
      display: none;

      ul {
        li {
          border-bottom: 1px solid #ddd;

          a {
            height: .38rem;
            line-height: .38rem;
            text-align: left;
            text-indent: .15rem;
            position: relative;

            span {
              position: absolute;
              right: .15rem;
              top: 50%;
              transform: translateY(-50%);
              color: orange;
            }
          }
        }
      }
    }

    .popprice {
      background-color: #fff;
      position: absolute;
      width: 100%;
      top: .731rem;
      display: none;

      ul {
        li {
          border-bottom: 1px solid #ddd;

          a {
            height: .38rem;
            line-height: .38rem;
            text-align: left;
            text-indent: .15rem;
            position: relative;

            span {
              position: absolute;
              right: .15rem;
              top: 50%;
              transform: translateY(-50%);
              color: orange;
            }
          }
        }
      }
    }

    .popcat {
      background-color: #fff;
      position: absolute;
      width: 100%;
      top: 1.461rem;
      display: none;

      ul {
        li {
          border-bottom: 1px solid #ddd;

          a {
            height: .38rem;
            line-height: .38rem;
            text-align: left;
            text-indent: .15rem;
            position: relative;

            span {
              position: absolute;
              right: .15rem;
              top: 50%;
              transform: translateY(-50%);
              color: orange;
            }
          }
        }
      }
    }

    .popsearch {
      position: absolute;
      width: 100%;
      top: 1.461rem;
      background-color: #fff;
      display: none;

      .formsch {
        padding: 10px;

        &::before {
          content: "";
          position: absolute;
          width: 35px;
          height: 35px;
          background-size: 300px;
          background-image: url("../images/icon_bar.png");
          background-position: -60px 2px;
          z-index: 3;
        }

        input {
          text-indent: 20px;
        }
      }

      .c {
        padding: 0 10px 10px 10px;
        border-bottom: 1px solid #ddd;

        p {
          margin: 0;
          padding: 10px 0;
        }

        ul {
          display: flex;

          li {
            flex: 3;
            padding: 0 5px;

            a {
              border: 1px solid #ddd;
              height: 35px;
              line-height: 35px;
              padding: 0;
            }
          }

          .active>a {
            background-color: orange;
          }
        }
      }

      .select {
        padding: 0 10px 0px 10px;
        border-bottom: 1px solid #ddd;

        p {
          margin: 0;
          padding: 10px 0;
        }

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            width: 25%;
            margin: 0;
            padding: 0 6px;
            padding-bottom: 10px;

            a {
              border: 1px solid #ddd;
              height: 35px;
              line-height: 35px;
              padding: 0;
            }
          }

          .active>a {
            background-color: orange;
          }
        }
      }
    }
  }

  .bd {
    // margin-top: .39rem;

    .masonry {

      li {
        float: left;
        width: 50%;
        padding: 4px;

        a {
          text-decoration: none;
          color: inherit;
          border: 1px solid #ddd;
          background-color: #fff;

          .pic {
            height: 3.19rem;

            img {
              height: 100%;
            }
          }
        }

        .title {
          padding: 0px 6px;
          height: .24rem;
          font-size: .16rem;
          overflow: hidden;
        }

        .price {
          padding: 6px;
          font-size: .20rem;

          span:nth-child(2) {
            float: right;
            background-color: orange;
            color: white;
            border-radius: .2rem;
            padding: 0 5px;
          }
        }
      }
    }
  }


  // 底部开始
  footer {}

  // 底部结束
}